<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>上传图片</legend>
        </fieldset>
        <form class="layui-form" action="" lay-filter="example">
            <div class="layui-form-item">
                <label class="layui-form-label">Boss名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" autocomplete="off" class="layui-input" disabled="true">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">缩略图</label>
                <div class="layui-input-block">
                    <div class="layui-upload-drag" style="display: block;" id="upload-drag-1">
                        <i class="layui-icon layui-icon-upload"></i>
                        <div>点击上传，或将文件拖拽到此处</div>
                        <div id="upload-preview-1">
                            <hr>
                            <img v-if="detail.head_img" :src="buildFullUrl(detail.head_img)" alt="上传成功后渲染" style="max-width: 100%">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">大图</label>
                <div class="layui-input-block">
                    <div class="layui-upload-drag" style="display: block;" id="upload-drag-2">
                        <i class="layui-icon layui-icon-upload"></i>
                        <div>点击上传，或将文件拖拽到此处</div>
                        <div id="upload-preview-2">
                            <hr>
                            <img v-if="detail.body_img" :src="buildFullUrl(detail.body_img)" alt="上传成功后渲染" style="max-width: 100%">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
<style>
    .layui-upload-drag img{
        max-height: 240px;
    }
</style>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<script>
    Id = urlParam('id')
    new Vue({
        el:"#app",
        data:{
            id:Id,
            detail:{},
        },
        methods:{
            buildFullUrl:function(path){
                return localStorage.getItem('web_url') + path;
            }
        },
        mounted:function() {
            var _this = this;
            layui.use(['form', 'laydate','upload'], function () {
                var form = layui.form, layer = layui.layer, $ = layui.$,upload=layui.upload;
                if (Id) {
                    $.get('/admin/boss/' + Id, {}, function (res) {
                        var data = res.data;
                        form.val('example', {
                            "name": data.name,
                        })
                        _this.detail = res.data;
                        form.render()
                    })
                    //表单初始赋值
                }
                //监听提交
                form.on('submit(demo1)', function (data) {
                    var formData = JSON.parse(JSON.stringify(_this.detail));
                    if (Id) { //edit
                        formData._method = 'put';
                        $.post('/admin/boss/' + Id, formData, function (res) {
                            if (res.code === 0) {
                                layer.msg('success', {icon: 6, time: 500}, function () {
                                    parent.location.reload();//父页面刷新
                                })
                            } else {
                                layer.msg(res.msg, {icon: 5})
                            }
                        })
                    }
                    return false;
                });

                // 渲染
                upload.render({
                    elem: '#upload-drag-1',
                    url:"/admin/upload/upload",
                    done: function(res){
                        layer.msg('上传成功',{icon:1});
                        $('#upload-preview-1').removeClass('layui-hide').find('img').attr('src', localStorage.getItem('web_url') + res.data.path );
                        _this.detail.head_img = res.data.path
                        console.log(
                            _this.detail.head_img
                        )
                        console.log(localStorage.getItem('web_url') + res.data.path)
                    }
                });
                // 渲染
                upload.render({
                    elem: '#upload-drag-2',
                    url:"/admin/upload/upload",
                    done: function(res){
                        layer.msg('上传成功',{icon:1});
                        $('#upload-preview-2').removeClass('layui-hide').find('img').attr('src',  localStorage.getItem('web_url') + res.data.path);
                        _this.detail.body_img = res.data.path
                    }
                });
                form.render();
            })
        }
    });
</script>
</body>
</html>